import { useIntersectionObserver} from '@vueuse/core'

//自定义图片懒加载指令插件
export const lazyPlugin={
    install(app){
        app.directive('img-lazy',{
            mounted(el,binding){
                //el:指令绑定的dom元素
                //binding：binding.value 指令等号后面的值
                //console.log(el,binding.value)
                const {stop} = useIntersectionObserver(
                    el,
                    ([{isIntersecting}])=>{
                        console.log(isIntersecting)
                        if(isIntersecting){
                            //进入视口区域
                            el.src=binding.value
                            //停止监听
                            stop()
                        }
                    }
                    )
            }
        })
    }
}